<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>加速运动</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		div{
			position:absolute;
			width:100px;
			height:100px;
			background:orange;
		}
	</style>
</head>
<body>
	<div></div>

	<script type="text/javascript">
		var oDiv = document.getElementsByTagName('div')[0];
		
		oDiv.onclick = function(){
			startMove(this);
		};


		//减速运动
		// function startMove(obj){
		// 	clearInterval(obj.timer);

		// 	var iSpeed = 40;
		// 	var a = -3;
		// 	//v = v0 + at
		// 	obj.timer = setInterval(function(){
		// 		iSpeed = iSpeed + a;
		// 		obj.style.left = obj.offsetLeft + iSpeed + "px";
		// 	},30)
		// }


		//加速运动
		function startMove(obj){
			clearInterval(obj.timer);

			var iSpeed = 0;
			var a = 3;
			//v = v0 + at
			obj.timer = setInterval(function(){
				iSpeed = iSpeed + a;
				obj.style.left = obj.offsetLeft + iSpeed + "px";
			},30)
		}
	</script>
</body>
</html>